<template>
	<div class="detail-item">
		<div class="item">
      <el-tabs v-model="other.activeName" @tab-click="handleClick">
        <el-tab-pane label="报名情况" name="1" data-val="1">
          <div class="select-type">
            <div class="item">
              <span>审核状态</span>
              <div class="right">
                <span v-for="(item, index) in $getJsonValue('审核状态')" :key="index" :class="params_list.status == item.val ? 'active' : ''" @click="selected(item)">{{item.label}}({{item.sum}})</span>
              </div>
            </div>
            <div class="item table-item">
              <div class="right">
                <div class="item-inline">
                  <span>店铺名称</span>
                  <el-input class="tel-value" v-model="params_list.name" placeholder="请输入店铺名称"></el-input>
                </div>
                <div class="item-inline">
                  <span>SKU</span>
                  <el-input class="tel-value" v-model="params_list.sku" placeholder="请输入sku"></el-input>
                </div>
                <div class="item-inline">
                  <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-item">
            <div class="item">
              <div class="jx-table" style="padding: 0;">
                <el-table :data="detail" border style="width: 100%" v-loading="boo.loading">
                  <el-table-column type="index" label="序列" width="60" align="center" fixed>
                  </el-table-column>
                  <el-table-column prop="item1" label="报名时间" width="100" align="center" fixed>
                  </el-table-column>
                  <el-table-column prop="item2" label="店铺名称" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item3" label="报名商品"  align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item5" label="所在地区"  align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item4" label="SKU" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item6" label="当前价格" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item7" label="商品数量" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item8" label="报名价格" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item9" label="平台补贴金额" width="100" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.item9"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="item10" label="活动参数" width="450" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <div v-if="scope.row.item10 == '不符合'" class="text">
                        <span>
                          <img class="icon" src="/static/img/u2410.png"/>
                          不符合
                        </span>
                        <div class="info red">
                          注册时间： 无；资质： 无
                        </div>
                        <div class="info">
                          【审核后设置活动参数】
                        </div>
                      </div>
                      <div v-else class="text">
                        <img class="icon" src="/static/img/u2411.png"/>
                        符合要求
                        <div class="active-con">
                          <div class="item" v-for="(item,index) in scope.row.item10" :key="index">
                            <span>设置秒杀时间点：</span>
                            <el-time-select
                              @change="changeTime"
                              placeholder="秒杀时间"
                              v-model="item.time"
                              :picker-options="pickerOptionsMax">
                            </el-time-select>
                            <span>数量：</span>
                            <el-input style="width: 80px;" v-model="item.sum" @blur.prevent="changeActive(scope.row)"></el-input>
                            <el-button v-if="other.isAddactive" @click="addActive(item,scope.row)" type="text" size="small">增加</el-button>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="item11" label="审核结果" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="210" fixed>
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.item11 == '待审核'" @click="hiddenRow(scope.row)" type="text" size="small">审核通过</el-button>
                      <el-button v-if="scope.row.item11 == '待审核'" @click="hiddenRow(scope.row)" type="text" size="small">审核不通过</el-button>
                      <el-button v-else @click="deleteRow(scope.row)" type="text" size="small">反审核</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="活动统计" name="2" data-val="2">
          <div class="list-content">
            <div class="list-data">
              <span class="bg">累计UV</span>
              <span>33702</span>
            </div>
            <div class="list-data">
              <span class="bg">成交笔数</span>
              <span>33702</span>
            </div>
            <div class="list-data">
              <span class="bg">成交额</span>
              <span>33702</span>
            </div>
            <div class="list-data">
              <span class="bg">成交转化</span>
              <span>6.5%</span>
            </div>
            <div class="list-data">
              <span class="bg">参与人数</span>
              <span>337</span>
            </div>
          </div>
          <div class="select-type">
            <div class="item">
              <span>筛选</span>
              <div class="right">
                <span v-for="(item, index) in $getJsonValue('筛选')" :key="index" :class="params_list.status == item.val ? 'active' : ''" @click="selected(item)">{{item.label}}({{item.sum}})</span>
              </div>
            </div>
            <div class="item table-item">
              <div class="right">
                <div class="item-inline">
                  <span>店铺名称</span>
                  <el-input class="tel-value" v-model="params_list.name" placeholder="请输入店铺名称"></el-input>
                </div>
                <div class="item-inline">
                  <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-item">
            <div class="item">
              <div class="jx-table" style="padding: 0;">
                <el-table :data="detail" border style="width: 100%" v-loading="boo.loading">
                  <el-table-column type="index" label="序列" width="60" align="center">
                  </el-table-column>
                  <el-table-column prop="item2" label="店铺名称" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item3" label="报名商品"  align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item4" label="SKU" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item6" label="报名价格" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item7" label="成交数量" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item7" label="UV数量" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item6" label="成交转化" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="item6" label="累计成交额" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        boo: {
          loading: false,
        },
        pickerOptionsMax:{
          start: '00:00',
          step: '00:01',
          end: '23:59',
        },
        other: {
          activeName: '1',
          sum: '',
          isAddactive: false,
        },
        params_list: {
          status:'',
          name: '',
          sku: '',
        },
        detail: [
          {item1: '2019-09021 18：21：00',item2: '云途养护官方旗舰店',item3: '【保养】洗车服务',item4: '372191992333333',item5: '上海',item6: '30',item7: '100',item8: '0',item9: '',item10: '不符合',item11: '待审核',},
          {item1: '2019-09021 18：21：00',item2: '云途养护官方旗舰店',item3: '【保养】洗车服务',item4: '372191992333333',item5: '上海',item6: '30',item7: '100',item8: '0',item9: '7',item10: [{time:'',sum: ''}],item11: '审核通过',}
        ],
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      changeTime(val){
        let _self = this
      },
      viewRow(){

      },
      handleClick(tab, event) {
        let _self = this
        _self.params_list.status = tab.$el['dataset']['val'] || ''
        console.log(_self.params_list.status)
      },
      selected(item){
        let _self = this
        _self.params_list.status = item.val
        _self.getList()
      },
      search(){},
      changeActive(item){
        let _self = this
        let sums = 0
        item.item10.forEach(function(item){
          sums += Number(item.sum)
        })
        _self.other.sum = sums
        if(_self.other.sum > Number(item.item7)){
          _self.$message.error('请勿超出当前商品数量')
          _self.other.isAddactive = false
        }else {
          if(_self.other.sum == Number(item.item7)){
            _self.other.isAddactive = false
          }else {
            _self.other.isAddactive = true
          }
        }
        
      },
      // 活动参数增加
      addActive(item,active){
        let _self = this
        if((item.time == '') || (item.time == null)) return _self.$message.error('请选择秒杀时间点')
        console.log(_self.other.sum)
        active.item10.push({
          time: '',
          sum: '',
        })
      },
      hiddenRow(){},
      deleteRow(){},
    }
	}

</script>
<style scoped lang="sass">
  .jx-table .el-table .cell
    .icon
      width: 18px
      height: 18px
      position: relative
      top: 2px
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  /deep/ .el-tabs__nav-wrap::after
    height: 0
  .list-content
    padding-top: 20px
    .list-data
      display: inline-block
      margin-right: 20px
      height: 75px
      line-height: 75px
      margin-bottom: 20px
      &::before 
          content: ''
          display: block
          clear: both
      .bg  
        background: #e3f4ff
        border: 1px solid #e3f4ff
        font-size: 16px
        font-weight: 500
      span 
        float: left
        background: #fff
        border: 1px solid #e4e4e4
        display: inline-block
        padding: 0 20px
        text-align: center
        font-size: 23px
        font-weight: 600
        em 
          font-style: normal
          font-weight: 500
  .active-con
    .item
      display: flex
      text-align: left
      padding: 0
      margin-bottom: 10px
      .el-input
        margin: 0 5px
        max-width: 120px
      span
        line-height: 31px
        margin-right: 5px
</style>
